<template>
	<ul @click="pageClick" class="v-pager">
		<li :class="{ active: currentPage === 1, disabled }" v-if="pageCount > 0">
			1
		</li>
		<li v-if="showPrevMore" class="more quickprev">...</li>
		<li
			v-for="pager in pagers"
			:key="pager"
			:class="{ active: currentPage === pager, disabled }"
			class="number"
		>
			{{ pager }}
		</li>
		<li v-if="showNextMore" class="more quicknext">...</li>
		<li
			:class="{ active: currentPage === pageCount, disabled }"
			class="number"
			v-if="pageCount > 1"
		>
			{{ pageCount }}
		</li>
	</ul>
</template>
<script>
export default {
	name: "VPager",
	data() {
		return {
			current: null,
			showPrevMore: false,
			showNextMore: false,
		};
	},
	props: {
		currentPage: Number, //当前页码

		pageCount: Number, //总页数

		pagerCount: Number,

		disabled: Boolean,
	},
	watch: {},
	created() {},
	computed: {
		pagers() {
			const pagerCount = this.pagerCount;
			const halfPagerCount = (pagerCount - 1) / 2;

			const currentPage = Number(this.currentPage);
			const pageCount = Number(this.pageCount);

			let showPrevMore = false;
			let showNextMore = false;

			if (pageCount > pagerCount) {
				if (currentPage > pagerCount - halfPagerCount) {
					showPrevMore = true;
				}

				if (currentPage < pageCount - halfPagerCount) {
					showNextMore = true;
				}
			}

			const array = [];

			if (showPrevMore && !showNextMore) {
				const startPage = pageCount - (pagerCount - 2);
				for (let i = startPage; i < pageCount; i++) {
					array.push(i);
				}
			} else if (!showPrevMore && showNextMore) {
				for (let i = 2; i < pagerCount; i++) {
					array.push(i);
				}
			} else if (showPrevMore && showNextMore) {
				const offset = Math.floor(pagerCount / 2) - 1;
				for (let i = currentPage - offset; i <= currentPage + offset; i++) {
					array.push(i);
				}
			} else {
				for (let i = 2; i < pageCount; i++) {
					array.push(i);
				}
			}

			this.setShowMore(showPrevMore, showNextMore);

			return array;
		},
	},
	methods: {
		setShowMore(prev, next) {
			this.showPrevMore = prev;
			this.showNextMore = next;
		},
		pageClick(event) {
			console.log(event);
			const target = event.target;
			if (target.tagName === "UL" || this.disabled) {
				return;
			}

			let newPage = Number(event.target.textContent);
			const pageCount = this.pageCount;
			const currentPage = this.currentPage;
			const pagerCountOffset = this.pagerCount - 2;

			if (target.className.indexOf("more") !== -1) {
				if (target.className.indexOf("quickprev") !== -1) {
					newPage = currentPage - pagerCountOffset;
				} else if (target.className.indexOf("quicknext") !== -1) {
					newPage = currentPage + pagerCountOffset;
				}
			}

			/* istanbul ignore if */
			if (!isNaN(newPage)) {
				if (newPage < 1) {
					newPage = 1;
				}

				if (newPage > pageCount) {
					newPage = pageCount;
				}
			}

			if (newPage !== currentPage) {
				this.$emit("change", newPage);
			}
		},
	},
};
</script>
<style lang="less" scoped>
.v-pager {
	display: inline-block;
	vertical-align: middle;
	li {
		display: inline-block;
		height: 28px;
		min-width: 30px;
		line-height: 28px;
		padding: 0 5px;
		text-align: center;
		cursor: pointer;
		margin-left: 6px;
		transition: all 0.2s;
		&:nth-of-type(1) {
			margin-left: 0;
		}
		&.disabled {
			color: #999;
			cursor: not-allowed;
		}
		&.active,
		&:hover {
			color: #ff5858;
			font-weight: bold;
		}
	}
}
</style>
